<template>
  <div class="songlist-item">
    <div v-if="index >= 4"
         v-for="(item, index) in songlist"
         :key="index"
         class="itemInfo"
         @click="goDetail(item)"
    >
      <img v-lazy="item.coverImgUrl" alt="">
      <div class="playCount">
        <img class="play-m" src="~@/assets/img/home/play-m.svg" alt="" >
        <div>{{ (item.playCount/10000).toFixed()}}</div>
        <span>万</span>
      </div>
      <div class="big-play">
        <img src="~@/assets/img/home/play-m.svg" alt="">
      </div>
      <p>{{item.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopBottomItem",
  props:{
    songlist:{
      type:Array,
    }
  },
  methods:{
    //跳转到歌单详情页
    goDetail(item){
      this.$router.push('/songlist/detail/id=' + item.id)
    },
  }
}
</script>

<style scoped>
.songlist-item{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  /*这是歌单详情路由的父组件，此代码防止两个组件的滚动条冲突，*/
  overflow-y: hidden;
}
.itemInfo{
  width: 17%;
  margin-bottom: 10px;
  position: relative;
}
.itemInfo img:nth-child(1){
  width: 100%;
  border-radius: 7px;
  cursor: pointer;
}
.itemInfo p{
  font-size: 14px;
  color: rgb(92, 81, 81);
  line-height: 20px;
  margin-top: -24px;
  margin-bottom: 4px;
}
.playCount{
  position: absolute;
  top: 5px;
  right: 10px;
  display: flex;
  font-size: 12px;
  color: white;
}
.playCount div{}
.play-m{
  position: relative;
  top: -3px;
  width: 20px;
  height: 20px;
}
.big-play{
  width: 27px;
  height: 27px;
  position: relative;
  top: -38px;
  left: 126px;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0;
  transition: all .8s;
}
.itemInfo:hover .big-play{
  opacity: 1;
}
.big-play{
  background-color: #e85252;
}

</style>
